<template>
  <div class="m-view-layout">
    <el-container style="position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden">
      <el-header style="background:#545c64;" class="d-flex align-items-center">
        <a class="h5 text-light mb-0 mr-auto">{{$conf.logo}}</a>
        <el-menu
          :default-active="navBar.active"
          class="el-menu-demo"
          mode="horizontal"
          @select="navBarSelect"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item
            :index="index|numToString"
            v-for="(item,index) in navBar.list"
            :key="index"
          >{{item.name}}</el-menu-item>

          <el-submenu index="99">
            <template slot="title">
              <!-- 头像 -->
              <el-avatar size="small" :src="circleUrl"></el-avatar>summer
            </template>
            <el-menu-item index="2-1">修改</el-menu-item>
            <el-menu-item index="2-2">退出</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-header>
      <el-container style="height:100%;">
        <!-- ======侧边布局=============== -->
        <el-aside width="200px">
          <!-- 导航菜单 -->
          <el-menu :default-active="slideMenuActive" @select="slideSelect" style="height:100%;">
            <el-menu-item :index="index+''" v-for="(item,index) in slideMenus" :key="index">
              <i :class="item.icon"></i>
              <span slot="title">{{item.name}}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <!-- 主体内容部分 -->
        <el-main class="bg-light " style="position: relative;">
          <!-- ==============面包谢导航 ==================-->
          <div
            class="bg-white"
            style="padding:20px; margin:-20px;  border-bottom: 1px solid #EDEDED; margin-bottom: 30px;"
            v-if="bran.length>0"
          >
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item
                v-for="(item,index) in bran"
                :key="index"
                :to="{ path:item.path}"
              >{{item.title}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <!-- ===============主内容的地方=============== -->
          <!-- 路由跳转的地方 -->
          <router-view></router-view>
          <el-backtop target=".el-main" :bottom="100">
            <div
              style="{
					        height: 100%;
					        width: 100%;
					        background-color: #f2f5f6;
					        box-shadow: 0 0 6px rgba(0,0,0, .12);
					        text-align: center;
					        line-height: 40px;
					        color: #1989fa;
					      }"
            >^</div>
          </el-backtop>
        </el-main>
      </el-container>
    </el-container>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
import common from "@/common/mixins/common.js";
export default {
  mixins: [common],
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      slideIndex: "2",
      navBarIndex: "2",
      navBar: [],
      bran: "",
    };
  },

  computed: {
    //当前激活的菜单
    slideMenuActive() {
      return this.navBar.list[this.navBar.active].subActive || [];
    },
    //导航栏对应的菜单
    slideMenus() {
      return this.navBar.list[this.navBar.active].subMenu || [];
    },
  },

  watch: {
    //监听路由的变化
    $route(to, from) {
      //路由变化再次获取一次面包屑导航
      this.getRouterBran();
      //解决刷新后的侧边栏激活页面的记忆
      window.localStorage.setItem(
        "navActive",
        JSON.stringify({
          top: this.navBar.active,
          left: this.slideMenuActive,
        })
      );
    },
  },

  methods: {
    //初始化导航栏和侧边栏

    initNavBar() {
      let r = window.localStorage.getItem("navActive");
      if (r) {
        r = JSON.parse(r);
        this.navBar.active = r.top;
        // this.slideMenuActive=r.left;
        this.navBar.list[this.navBar.active].subActive = r.left;
      }
    },

    //---------获取面包屑导航-------------
    getRouterBran() {
      //过滤出name的数据
      let b = this.$route.matched.filter((item) => item.name);
      let arrBran = [];
      b.forEach((item, index) => {
        if (item.name === "layout" || item.name === "index") return;
        arrBran.push({
          name: item.name,
          path: item.path,
          title: item.meta.title,
        });
      });
      if (arrBran.length > 0) {
        //如果不是首页的话就在面包屑里面加首页
        arrBran.unshift({
          name: "index",
          path: "/index",
          title: "首页",
        });
      }
      // 保存面包屑数据
      this.bran = arrBran;
    },
    // ---------顶部导航的选择事件----------
    navBarSelect(key, keyPath) {
      console.log("key", key);
      if (key === "2-1") {
        return console.log("修改");
      }

      if (key === "2-2") {
        return console.log("退出");
      }
      //选择的改变
      this.navBar.active = key;
      // 跳转当前激活侧边栏的页面
      console.log("跳转的路由", this.slideMenus[this.slideMenuActive].pathname);
      this.$router.push({
        name: this.slideMenus[this.slideMenuActive].pathname,
      });
    },
    //----------左侧导航菜选择事件---------
    slideSelect(key, keyPath) {
      this.navBar.list[this.navBar.active].subActive = key;
      this.$router.push({
        name: this.slideMenus[key].pathname,
      });
    },
  },

  created() {
    // 初始化菜单
    this.navBar = this.$conf.navBar;
    //页面一进来就获取面包屑导航
    this.getRouterBran();
    //初始化侧边栏和导航栏
    this.initNavBar();
  },
};
</script>

<style>
.m-view-layout {
}
</style>
